Coding2 - Style Intergration

Coding 2: TailwindCSS + ShadCN UI + Path Alias Setup

🎯 Goal:

Install and configure TailwindCSS and ShadCN UI for reusable components, using the officially recommended Vite + TypeScript method with path aliasing (@).

---

🧱 A. TailwindCSS Setup (using Vite plugin)

1. Install Tailwind and the Vite plugin

npm install tailwindcss @tailwindcss/vite

---

2. Update vite.config.ts

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

---

3. Create src/styles.css

@import "tailwindcss";

---

4. Import it in main.tsx

import "./styles.css"

---

🧱 B. Alias Configuration for TypeScript

1. Update tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "references": [
    { "path": "./tsconfig.node.json" },
    { "path": "./tsconfig.app.json" }
  ]
}

---

2. Update tsconfig.app.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

---

3. Update vite.config.ts

npm install -D @types/node

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

---

🧱 C. ShadCN UI Setup

1. Initialize ShadCN UI

npx shadcn@latest init

2. Add a ShadCN component (e.g. button)

npx shadcn@latest add button

---

✅ D. Test ShadCN Button in App.tsx

import { Button } from "@/components/ui/button"

export default function App() {
  return (
    <div className="p-8 text-center space-y-4">
      <h1 className="text-3xl font-bold text-blue-500">Tailwind + ShadCN + Vite</h1>
      <Button>Click Me</Button>
    </div>
  )
}

---

📁 Resulting Project Snapshot

react-crud-app/
├── src/
│   ├── components/ui/button.tsx
│   ├── styles.css
│   ├── App.tsx
│   └── main.tsx
├── tsconfig.json
├── tsconfig.app.json
├── vite.config.ts
├── package.json

---

✅ You’re Now Ready for:

Step 3: React Router Setup (to support pages like Dashboard, Add, Edit, View)

Shall we proceed to the routing setup?